<%--
  Created by IntelliJ IDEA.
  User: pc
  Date: 2020/11/21
  Time: 16:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>房间表</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>
<body>
        <!--添加的form表单-->
        <div id="addGustForm">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">房间号</label>
                    <div class="layui-input-block">
                        <input type="text"  name="roomcode" required  lay-verify="required" placeholder="请输入房间号" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">房间状态</label>
                    <div class="layui-input-block">
                        <input type="text" name="status" required   placeholder="请输入房间状态" autocomplete="off" class="layui-input">
                    </div>
                </div>



                <div class="layui-form-item">
                    <label class="layui-form-label">选择框</label>
                    <div class="layui-input-block">
                        <select name="typeid" lay-verify="required" id="roomtype" >

                        </select>
                    </div>
                </div>



                <div class="layui-form-item" style="margin-top: 10px">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo" >立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>



        <!--修改的form表单-->

        <div id="updGustForm">
            <form class="layui-form" action="" lay-filter="modify">

                <div class="layui-form-item">
                    <label class="layui-form-label">房间号</label>
                    <div class="layui-input-block">
                        <input type="text"  name="roomcode" required  lay-verify="required" placeholder="请输入房间类型" autocomplete="off" class="layui-input">
                    </div>
                </div>



                <div class="layui-form-item">
                    <label class="layui-form-label">选择框</label>
                    <div class="layui-input-block">
                        <select name="status" lay-verify="required">
                            <option value="0">正常</option>
                            <option value="1">禁用</option>
                        </select>
                    </div>
                </div>


<%--                <div class="layui-form-item">--%>
<%--                    <label class="layui-form-label">房间状态</label>--%>
<%--                    <div class="layui-input-block">--%>
<%--                        <input type="text" name="status" required   placeholder="入请输押金" autocomplete="off" class="layui-input">--%>
<%--                    </div>--%>
<%--                </div>--%>



                <div class="layui-form-item">
                    <label class="layui-form-label">选择框</label>
                    <div class="layui-input-block">
                        <select name="typeid" lay-verify="required" id="roomtype1" >

                        </select>
                    </div>
                </div>



                <div class="layui-form-item" style="margin-top: 10px">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo" >立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>


        <!--条件查询的form表单-->
        <form class="layui-form" action="">
            <div class="layui-inline">
                <label class="layui-form-label">房间号</label>
                <div class="layui-input-inline">
                    <input type="text" name="roomcode1" placeholder="请输入用户编号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">房间类型</label>
                <div class="layui-input-inline">
                    <input type="text" name="roomtype1" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <button class="layui-btn" lay-submit lay-filter="formDemo1">查询</button>
                </div>
            </div>
        </form>





        <table class="layui-hide" id="test" lay-filter="test"></table>





        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="getCheckData">添加房间</button>
            </div>
        </script>

        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-disabled " >删除</a>

<%-- <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>--%>

        </script>



        <script>
            layui.use(['table','jquery','form','layer','laypage'], function(){
                var table = layui.table;
                var $ = layui.jquery;
                var form = layui.form;
                var layer = layui.layer;
                var laypage = layui.laypage;
                $("#addGustForm").hide();
                $("#updGustForm").hide();

                var sellike="";







                table.render({
                    elem: '#test'
                    ,url:'/selectroom'
                    ,toolbar: '#toolbarD                                                                                                                                                                                                                                                                                                                                     emo' //开启头部工具栏，并为其绑定左侧模板
                    ,title: '房间表'
                    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                    ,page:true//开启分页
                    ,limit:3//每页显示的条数
                    ,limits:[5,10,15]//limits就是你可以更改每页显示的条数
                    ,request:{
                        pageName:'page',
                        limitName:'limit'
                    }
                    ,cols: [[
                        {field:'id', title:'ID', fixed: 'left', unresize: true, sort: true}
                        ,{field:'roomcode', title:'房间号', edit: 'text'}
                        ,{field:'status', title:'状态', edit: 'text', templet: function(res){
                            var d = res.status;
                            if (d==0){
                                return "正常";
                            }else {
                                return "禁用";
                            }
                                //return '<em>'+ res.status +'</em>'
                            }}
                        ,{field:'tname', title:'房间类型'}
                        ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
                    ]]
                });



                //监听submit提交
                form.on('submit(formDemo1)',function (data){
                    //alert(data.field);//当前容器的全部表单字段,名值对形式{name:value}
                    var roomcode = data.field.roomcode1;
                    var roomtype = data.field.roomtype1;
                    if (roomcode!=null && roomcode!=""){
                    sellike +=" and roomcode like '"+"%"+roomcode+"%'";
                    }
                    if (roomtype!=null && roomtype!=""){
                        sellike +=" and name like '"+"%"+roomtype+"%'";
                    }
                    alert(sellike);
                    table.reload('test',{
                        where:{
                            //这里是请求的参数,(注意:这里的参数可以任意定义)
                            sellike:sellike
                        },
                        page:{
                            curr:1
                        }
                    });
                    // sellike="";
                    //阻止表单的跳转
                    return false;


                })

                //头工具栏事件
                table.on('toolbar(test)', function(obj){
                    var checkStatus = table.checkStatus(obj.config.id);
                    switch(obj.event){
                        case 'getCheckData':
                            var data = checkStatus.data;

                            <!--添加弹出框-->
                            layer.open({
                                type: 1,
                                skin: 'layui-layer-rim', //加上边框
                                area: ['800px', '400px'], //宽高
                                content: $("#addGustForm")
                            });

                            $.ajax({
                                url:"/roomtype",
                                type: "post",
                                dataType: "JSON",
                                success:function (ret){
                                    $("#roomtype").empty();
                                    $.each(ret,function (index,item) {
                                        $("#roomtype").append("<option value='"+item.id+"'>"+item.tname+"</option>");
                                    })
                                    form.render("select");
                                }
                                ,error:function (){
                                    alert("错误");
                                }
                            })


                            //提交按钮
                            form.on('submit(formDemo)', function(data){
                                //layer.msg(JSON.stringify(data.field));
                                //1.将获取到到的数据保存到数据库
                                $.ajax({
                                    url:"/tjone",
                                    data:data.field,
                                    dataType: "JSON",
                                    type:"post",
                                    success:function (ret){
                                        if (ret>0){
                                            alert("成功");
                                            return true;
                                        }else {
                                            alert("已拥有此房间")
                                        }
                                    },error:function (){
                                        alert("已拥有房间");
                                    }
                                })
                                //刷新表单

                            });



                            break;
                        case 'getCheckLength':
                            var data = checkStatus.data;
                            layer.msg('选中了：'+ data.length + ' 个');
                            break;
                        case 'isAll':
                            layer.msg(checkStatus.isAll ? '全选': '未全选');
                            break;

                        //自定义头工具栏右侧图标 - 提示
                        case 'LAYTABLE_TIPS':
                            layer.alert('这是工具栏右侧自定义的一个图标按钮');
                            break;
                    };
                });

                //监听行工具事件
                table.on('tool(test)', function(obj){
                    var data = obj.data;
                    //console.log(obj)
                    if(obj.event === 'del'){
                        layer.confirm('真的删除行么', function(index){
                            //obj.del();//我要删除这一行
                            $.ajax({
                                url: "/delone",
                                data:"id="+data.id,
                                Type:"JSON",
                                success:function (ret){
                                    if (ret>0){
                                        alert("成功");
                                    }
                                }
                                ,error:function (){
                                }
                            })

                            table.reload('test',{
                                page:{
                                    curr:1,
                                }
                            }),
                            layer.close(index);
                        });
                    } else if(obj.event === 'edit'){
                        form.val("modify",data);

                        layer.open({
                            type: 1,
                            title:'修改信息',
                            skin: 'layui-layer-rim', //加上边框
                            area: ['1000px', '800px'], //宽高
                            content: $("#updGustForm")
                        });


                        $.ajax({
                            url:"/roomtype",
                            type: "post",
                            dataType: "JSON",
                            success:function (ret){
                                $("#roomtype1").empty();
                                $.each(ret,function (index,item) {
                                    $("#roomtype1").append("<option value='"+item.id+"'>"+item.tname+"</option>");
                                })
                                form.render("select");
                            }
                            ,error:function (){
                                alert("错误");
                            }
                        });

                        form.on('submit(formDemo)', function(data){
                            //layer.msg(JSON.stringify(data.field));
                            //1.将获取到到的数据保存到数据库
                            $.ajax({
                                url:"/tjone",
                                data:data.field,  //当前表单里面填写的数据{name:'',name1:''}
                                type:"post",
                                dataType:'JSON',
                                success:function(r){
                                    layer.closeAll();
                                    //刷新一下table
                                    table.reload('test',{
                                        page:{
                                            curr:1
                                        }
                                    })

                                },error:function(msg){
                                    alert("服务器错误")
                                }

                            })

                            return false;
                        });


                    }
                });

            });
        </script>



</body>
</html>
